<html>
<meta charset="utf-8">
<head>
	<script>
		
		var obj1={};
		var obj2={};
		function GengXin(obj,a,n)
		{
			var html="";
			for (var d in obj)
			{
				html+=`<div id="div${d}${n}">染色体${d}<br>请输入两个字母，大写表示显性，小写表示隐性：<textarea id="rst${d}${n}"></textarea><button onclick="XinJiYin(rst${d}${n}.value,'${d}',obj${n});${a}.innerHTML=GengXin(obj${n},'${a}',${n})">新增一个基因</button><br>`;
				for (var w in obj[d])
				{
					html+=obj[d][w]+"<br>";
				}
				html+="</div>";
			}
			
			return html;
		}
		function ZhengLi(str)
		{
			return Array.from(str).join("");
		}
		function XinRanSeTi(n,obj)
		{
			obj[n]=[];	
		}
		function XinJiYin(str,n,obj)
		{
			console.log(n);
			obj[n]["push"](str);
		}
		function DeDaoJiYin(RST,n)
		{
			var JY=""
			for (var a in RST)
			{
				JY=JY+RST[a][n];
			}
			return JY;
		}
		function DeDaoZiMu(object,array,n)
		{ 
			
			if(n==array.length)return [""];
			else
			{
				var arr=[];

					var w=DeDaoZiMu(object,array,n+1);
					var str0="",str1="";
					for(var p in object[array[n]])
					{
						str0+=object[array[n]][p][0];
						str1+=object[array[n]][p][1];
					}
					for (var z in w)
					{
						
						arr.push(str0+w[z]);
						arr.push(str1+w[z]);
					}

				return arr;
			}
		}
		function ShengChengLieBiao(result)
		{
			var html="<table>";
			html+="<tr><th>空</th>";
			for(var a in result.Lie)
			{
				
				html+=`<th>${result.Lie[a]}</th>`;
			}
			html+="</tr>";
			for(var b in result.Hang)
			{
				
				html+=`<tr><td>${result.Hang[b]}</td>`;
				for(var c in result.Lie)
				{
					html+=`<td>${ZhengLi(result.Hang[b]+result.Lie[c])}</td>`;
				}
				html+="</tr>";
				
			}
			html+="</table>";
			return html;
		}
		function JiaoPei(obj1,obj2)
		{
				
				var o1=DeDaoZiMu(obj1,Object.keys(obj1),0);
				var o2=DeDaoZiMu(obj2,Object.keys(obj2),0);
				console.log(o1);
				console.log(o2);
				var result={Hang:[],Lie:[]};
				for(var a in o1)
				{
					result.Lie.push(o1[a]);
					
				}
				for(var b in o2)
					{
						
						result.Hang.push(o2[b]);
					}
				console.log()
				document.getElementById("result").innerHTML=ShengChengLieBiao(result);
		}
	</script>
</head>
<body>
	<h1>注意：1.当前版本基因输入错误无法删除，请手动刷新页面！<br>2.目前只支持两个字母表示基因的子代生成，复等位基因请采用多个不同字母表示<br>3.对多倍体请自行添加多对染色体<br>(C) MikeLiu 2020 采用MIT许可证<br></h1>
	<h1>个体1</h1>
	<textarea id="染色体名"></textarea>
	<button onclick="XinRanSeTi(染色体名.value,obj1);main1.innerHTML=GengXin(obj1,'main1',1)">新增一对染色体</button>
	<br>
	<div id="main1">
	
	</div>
	
	<button onclick="JiaoPei(obj1,obj1)">自交</button>
	
	<h1>个体2</h1>
	<textarea id="染色体名2"></textarea>
	<button onclick="XinRanSeTi(染色体名2.value,obj2);main2.innerHTML=GengXin(obj2,'main2',2)">新增一对染色体</button>
	<br>
	<div id="main2">
	
	</div>
	<button onclick="JiaoPei(obj2,obj2)">自交</button>
	<button onclick="JiaoPei(obj1,obj2)">杂交</button>
	<div id="result"></div>
</body>

</html>